<html>
 <head>
  <title>Oterm -- Onion based terminal emulator over HTTP</title>
  <script src="/static/jquery-1.4.3.min.js"></script>
  <style>
#error{
  background: #faa;
  color: black;
  border-radius: 5px;
  border: 1px solid red;
  font-weight: bold;
  text-align: center;
  margin: 2em;
  padding: 0.5em;
  position: absolute;
  top: 1em;
  left: 10%;
  width: 80%;
  z-index: 2;
  opacity: 0.8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
#hint{
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  margin: 2em;
  padding: 0.5em;
  border-radius: 5px;
}
body{
	font-family: sans-serif;
	background: white;
	color: black;
	margin: 0;
	padding: 0;
	height: 100%;
}

a{
	color: red;
	text-decoration: none;
}
.float{
	border: 1px solid #aaa;
	border-radius: 5px;
	padding: 1em;
	float: right;
	width: 400px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
h1{
	font-size: 45pt;
}
#description{
	padding: 1em 1em 0em 1em;
}
#sessions{
	padding: 0em 1em 4em 1em;
}
#container{
	min-height: 100%;
	position: relative;
}
header{
	padding: 1em;
}
footer{
	position: absolute;
	bottom: 0;
	width: 99%;
	height: 3em;
	padding-left: 0.5em;
	text-align: center;
}
footer hr{
	width: 50%;
}
footer h4{
	margin: 0;
}
  </style>
 </head>
<body>
<div id="container">
<header>
<div class="float">
<a href="http://www.coralbits.com"><img src="/static/coralbits.png"></a>

<p>
Onion term <b>is free software!</b> 
<p>
Onion term is a test application for the <a href="http://www.coralbits.com/libonion/">onion http library</a>.


<p>
It is licensed under <a href="http://www.gnu.org/licenses/agpl.html">AGPL</a> (oterm) and 
<a href="http://www.gnu.org/licenses/lgpl.html">LGPL</a> (libonion).
You can find the source code at <a href="https://github.com/davidmoreno/onion/wiki">Github</a>.


</div>
<h1><a href="http://www.coralbits.com/oterm/">Onion Term</a></h1>

</header>

<div id="sessions">
<h2 id="sessions_title">Loading session information...</h2>

<ul id="current_sessions">
</ul>

Command <input type="text" name="command" value="/bin/bash"><br>
<h3><a href="javascript:newTerm()">Create a new remote session</a></h3>


</div>

<script>
newTerm = function(){
	$.post('/term/new', {command:$('[name=command]').val() }, function(data){
		updateSessionStatus()
	})
}

/// Updates the list of sessions
sessionStatus = function(data){
  $('#error').remove();
	$('#sessions_title').text('Current sessions')
	var s=$('#current_sessions')
	s.html('')
	for(var id in data){
		var a=$('<a>').text(id+' '+data[id].title).attr('target',data[id].uuid).attr('id',id)
		a.attr('href','/uuid/'+data[id].uuid+'/')
		s.append($('<li>').append(a))
	}
}

/// Requests the list of sessions
updateSessionStatus = function(){
	$.get('/term/status', sessionStatus,'json')
	setTimeout(updateSessionStatus, 5000) // each 5 seconds
}

$(document).ready(function(){
	$(document).ajaxError(function(){
		$('#sessions_title').text('Could not get session information. Check server is properly working.')
    $('#error').remove();
		$('body').prepend("<div id=\"error\">Error loading session status data. Trying to reconnect...</div>");
	})

	updateSessionStatus()
	setTimeout(updateSessionStatus, 5000) // each 5 seconds
})
</script>

<div id="hint"><b>Hint:</b> Terminal URL can be <b>shared on the network!</b> Just copy and paste it and several people on the same network can share a terminal.</div>

<footer>
<hr>
<h4>&copy; <a href="http://www.coralbits.com">Coralbits</a> S.L. 2011</h4>
</footer>
</div>
</body>
</html>
